iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
1
自我挑戰組

前端工程師的30份套餐系列 第 18

Day18-call()、apply()與bind()

  • 分享至 

  • xImage
  •  

函數就是物件,所以她可以有屬性和方法,
所有函數都可以有call()、apply()、bind()方法,這三個都和this變數以及傳入的參數有關

var person = {
    firstName: 'jian',
    lastName: 'joyce',
    getFullName: function() {
        var fullname = this.firstName + '' + this.lastName
        return fullname
    }
}
var logName = function(a,b) {
    console.log(this.getFullName());
}
logName()  //undefined is not a funciton

為何會錯誤呢? 因為console.log裡的this會指向全域物件,因為它不是指向pserson物件的方法,全域物件裡沒有getFullName。

這時候會覺得,如果可以控制this指向誰不是很好嗎?

bind()

在bind()裡傳入我想要this變數指向的物件,這時候用的this,就會是person,因為bind複製了一份函式

var logPersonName = logName.bind(person)
logPersonName(); //jian joyce

此外,還可以這樣做

var logName = function(a,b) {
    console.log(this.getFullName());
}.bind(person)

var logPersonName = logName.bind(pserson);
logName(); //這時執行logName()就不會有錯誤
//因為傳入bind,this變成person.getName,

call() 與 apply()

由下面的例子可以看出 call()和 apply()是為了動態改變this而出現的,當一個Object沒有這個方法,但是其他的Fn裡面有這個方法,這時就可以透過call或apply用方法来操作

function Fn() {}

Fn.prototype = {
    color:'red',
    say:function () {
        alert(this.color);
    }
};

var fn = new Fn();
fn.say();       //return red

 var Fn1 = {
    color:'yellow'
};

var fn = new Fn();
fn.say.call(Fn1);    //使用call()方法返
fn.say.apply(Fn1);   //使用apply()方法

上一篇
Day17-物件實體和JSON
下一篇
Day19- 閉包(一)
系列文
前端工程師的30份套餐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言